<template>
  <a-tabs v-model:activeKey="state.activeKey" class="tabs" @tabClick="tabClick" v-if="module">
    <!-- type="card" -->
    <a-tab-pane key="1" tab="运行信息" @reloadModuleBuildRun="reloadModuleBuildRun">
      <RunInfo
       ref="runInfoRef"
       :key="module.id"
       :logUrl= "logUrl"
        :module="module"
        :moduleRun="moduleRun"
         @reloadModuleBuildRun="reloadModuleBuildRun"
      />
    </a-tab-pane>
    <a-tab-pane key="2" tab="配置中心" @click="configCenterClick">
      <ConfigCenter :key="module.id" ref="configCenterRef" :moduleId="module?module.id:null"/>
    </a-tab-pane>
    <a-tab-pane key="3" tab="构建制品">
      <Build 
       ref="buildRef"
      :key="module.id"
        :moduleBuild="moduleBuild"
         :module="module"
          @buildSucess="buildSucess"
          @addMonitorLog="addMonitorLog"
          @addDetailLog="addDetailLog"
         />
    </a-tab-pane>
    <a-tab-pane key="4" tab="构建历史">
      <BuildRecord  :key="module.id" ref="buidlRecordRef"  @addMonitorLog="addMonitorLog"  @addDetailLog="addDetailLog" @reloadModuleBuildRun="reloadModuleBuildRun" :moduleId="module.id"/>
    </a-tab-pane>
    <a-tab-pane key="5" tab="操作历史">
      <Operate :key="module.id" ref="operateRef"  :moduleId="module.id"/>
    </a-tab-pane>
  </a-tabs>
  <a-empty class="empty" v-else/>
  <build-log @loadAllLog="loadAllLog" ref="buildLogRef"></build-log>
</template>


<script>
import { defineComponent, toRefs, ref } from "vue";
import { reactive } from "@vue/reactivity";
import RunInfo from "../content/RunInfo.vue";
import Build from "../content/Build.vue";
import BuildRecord from "../content/BuildRecord.vue";
import ConfigCenter from "../content/ConfigCenter.vue";
import Operate from "../content/Operate.vue";
import BuildLog from "../content/BuildLog.vue";

export default defineComponent({
  name: "moduleContainer",
  components: {
    RunInfo,
    Build,
    BuildRecord,
    ConfigCenter,
    Operate,
    BuildLog,
  },
  props: {
    logUrl: {
      type: String,
      required: false
    },
    module: {
      type: Object,
      required: false,
    },
    moduleBuild: {
      type: Object,
      required: false,
    },
    moduleRun: {
      type: Object,
      required: false,
    },
    activeKey: {
      type: Number,
      required: false,
    },
  },
  emits: ["reloadModuleBuildRun"],
  setup(props, ctx) {
    const runInfoRef = ref()
    const buidlRecordRef = ref()
    const operateRef = ref()
    const configCenterRef = ref()  
    const buildRef = ref()
    const buildLogRef = ref()

    const state = reactive({
      activeKey: '1'
    })

    const changeActive = (v) => {
      configCenterClick()
      runInfoClick()
      state.activeKey = v
    }

    const tabClick = (item) =>{
      if("1" === item){
        runInfoClick()
      }else if("2" === item){
        configCenterClick()
      }else if("3" === item){
        buildLoad()
      }else if("4" === item){
        flushBuildRecord()
      }else if('5' === item){
        flushOperate()
      }
    }

    const buildLoad = () => {
      if(buildRef.value){
        buildRef.value.loadLog()
      }
    }

    const runInfoClick = () =>{
      runInfoRef.value.reflushMouduleRunning()
    }


    const configCenterClick = () => {
      if(configCenterRef.value){
        configCenterRef.value.reset()
      }
    }
    

    const reloadModuleBuildRun = (moduleId) =>{
      ctx.emit('reloadModuleBuildRun', moduleId)
    }

    const buildSucess = (result) => {
      flushBuildRecord()
    }

    const flushBuildRecord = () =>{
      //为空时说明没有加载
      if(buidlRecordRef.value){
        buidlRecordRef.value.reflush()
      }
    }

    const flushOperate = () =>{
      //为空时说明没有加载
      if(operateRef.value){
        operateRef.value.page()
      }
    }

    const loadAllLog = (buildId, result)=>{
      buildRef.value.logEnd(buildId, result)
      flushBuildRecord()
    }

    const addMonitorLog = (buildId, isShowLog)=>{
      buildLogRef.value.addMonitorLog(buildId, isShowLog)
    }

    const addDetailLog = (buildId)=>{
      buildLogRef.value.addDetailLog(buildId)
    }
    

    return {
      state,
      buidlRecordRef,
      operateRef,
      runInfoRef,
      configCenterRef,
      reloadModuleBuildRun,
      changeActive,
      flushBuildRecord,
      configCenterClick,
      tabClick,
      buildRef,
      buildLogRef,
      loadAllLog,
      buildSucess,
      addMonitorLog,
      addDetailLog,
    }
  },
});
</script>

<style lang="less" >
.ant-tabs-top {
  display: flex;
  justify-content: space-between;
  //   border-bottom: 1px solid #e8e8e8;
  outline: none;
}
.ant-tabs-tab {
  margin-left: 20px;
}
.tabs {
  .ant-tabs-nav {
    padding: 8px 0;
  }
}
.empty{
  height: 800vh;
}
</style>